<template>
	<footer class="footer">
		<span class="todo-count">剩余<strong>{{ leftCount }}</strong></span>
		<ul class="filters">
			<li>
				<a @click="changeType('all')" :class="{ selected: type === 'all' }" href="javascript:;">全部</a>
			</li>
			<li>
				<a @click="changeType('active')" :class="{ selected: type === 'active' }" href="javascript:;">未完成</a>
			</li>
			<li>
				<a @click="changeType('complete')" :class="{ selected: type === 'complete' }" href="javascript:;">已完成</a>
			</li>
		</ul>
		<button class="clear-completed" v-show="showClear" @click="clearDone">清除已完成</button>
	</footer>
</template>

<script>
import { mapGetters, mapMutations, mapState } from 'vuex'
export default {
	computed: {
		...mapGetters('todos', ['leftCount', 'showClear']),
		...mapState('todos', ['type'])
	},
	methods: {
		...mapMutations('todos', ['clearDone', 'changeType'])
	}
}
</script>
